﻿<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Temp.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <link href="css/jquery-ui-1.8.20.custom.css" rel="stylesheet" type="text/css" />
    <script src="js/jquery-1.7.2.min.js" type="text/javascript"></script>
    <script src="js/jquery-ui-1.8.20.custom.min.js" type="text/javascript"></script>

    <script type="text/javascript">

        $(document).ready(function () {
            $("#txtName").focus();
            $("#addText").click(function () {
                // call ajax render

                var txtContent = $("#txtName").val();
                if (txtContent == "") {
                    alert("Xin vui long nhap noi dung");
                    return;
                }
                var bold = $('input[name=cbkBold]').is(':checked');
                var italic = $('input[name=cbkItalic]').is(':checked');
                var underline = $('input[name=cbkUnderline]').is(':checked');
                $.ajax({
                    type: "GET",
                    url: "AjaxRender.aspx",
                    data: "text=" + txtContent + "&bold=" + bold + "&italic=" + italic + "&under=" + underline,
                    success: function (msg) {

                        $("#container").append(msg);
                        
                        $(".drag").draggable({
                             containment: '#canvas',
                             cursor: 'move',
                             snap: '#canvas'   
                         }
                        );
                    }
                });

            });
        });
        

//        $(function () {
//            $(".drag").draggable();
//        });

    </script>

    <style type="text/css">
        #txtName
        {
            width: 233px;
        }
        #addText
        {
            width: 109px;
        }
    </style>

</head>
<body>
    <form id="form1" runat="server">
    <div>
        
        Text <input type="text" id="txtName"/> <br/>
        Bold <input type="checkbox" name="cbkBold" id="cbBold"/><br/>
        Italic <input type="checkbox" name="cbkItalic" id="cbItalic"/><br/>
        Underline<input type="checkbox" name="cbkUnderline" id="cbUnderline"/><br/>
     

        <br/><br/>

        <input type="button" value="Add new text" id="addText"/>
        
       

       <div id="canvas" runat="server" style=" position: fixed; width: 500px ; height: 500px ; border-color: gray; border-style: dashed">
             <div id="container" runat="server" style="position: fixed;border-color:lightgrey; border-style:dotted; height: 480px ; width: 480px;">
              
           
            </div>
           
        </div>
    
    </div>
    </form>
</body>
</html>
